<template>
	<scroll-view scroll-y="true" class="content">
		<view class="title">{{data.title}}</view>
		<view class="line">
			<view class="author">{{data.museumName}}</view>
			<view class="createTime">{{data.createDate}}</view>
		</view>
		<view class="detail"><rich-text :nodes="data.html"></rich-text></view>
		<!-- <view class="line last">{{readNum}}人阅读</view> -->
	</scroll-view>
</template>

<script>
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	import HTMLParser from '../../js_sdk/parse-html/html-parser.js'
	import {
		doGet
	} from '../../js_sdk/request-helper.js'
	export default {
		// props: {
		// 	title: String,
		// 	author: String,
		// 	createTime: String,
		// 	content: String,
		// 	readNum: Number,
		// },
		data() {
			return {
				title: "展览标题展览标题展览标题展览标题展览标题展览标题展览标题展览标题展览标题展览标题展览标题",
				author: "XX博物館",
				createTime: "2021年7月20日",
				content: "通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容",
				readNum: 20,

				data: {}
			}
		},
		onLoad(options) {
			this.getOne(options.id)
		},
		methods: {
			parse(str) {
				let list = new HTMLParser(str)
				return list
			},
			getOne(id) {
				doGet('/blade-museum/ntf/getOne?id=' + id, (res) => {
					res.createDate = dateToString(new Date(res.createTime.replace(/-/g,'/')),'yyyy/MM/dd')
					res.html = this.parse(res.content)
					this.data = res
				}, (err) => {

				})
			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: auto;
	}

	.title {
		padding: 20rpx 40rpx;
		font-size: 32rpx;
		font-weight: bolder;
		height: auto;
		line-height: 50rpx;
		color: #333;
	}

	.line {
		padding: 0 40rpx;
		display: flex;
		font-size: 20rpx;
		color: #666;
	}

	.author {
		font-size: 20rpx;
		margin-right: 20rpx;
	}

	.createTime {
		font-size: 20rpx;
	}

	.detail {
		margin: 20rpx 0;
		padding: 0 40rpx;
		font-size: 30rpx;
		color: #333;
	}

	.last {
		margin-top: 80rpx;
	}
</style>
